<template>
  <a-card :bordered="false">
    <div v-if="!pd">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="8" :sm="24">
              <a-form-item label="项目状态">
                <a-select v-model="queryParam.state" placeholder="请选择" >
                  <a-select-option v-for="(select, index) in states" :key="index">{{ select }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="项目名称">
                <a-input v-model="queryParam.projectName" placeholder=""/>
              </a-form-item>
            </a-col>
            <a-col :md="!advanced && 8 || 16" :sm="24">
              <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
                <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
                <a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>

      <!--    <div class="table-operator">-->
      <!--      <a-button type="dashed" @click="tableOption">{{ optionAlertShow && '关闭' || '开启' }}提示</a-button>-->
      <!--      <a-dropdown v-action:edit v-if="selectedRowKeys.length > 0">-->
      <!--        <a-menu slot="overlay">-->
      <!--          <a-menu-item key="remove">-->
      <!--            <remove-point ref="removePoint" :pointIds="selectedRowKeys.join(',')" @ok="handleOk"/>-->
      <!--          </a-menu-item>-->
      <!--        </a-menu>-->
      <!--        <a-button style="margin-left: 8px">-->
      <!--          批量操作 <a-icon type="down" />-->
      <!--        </a-button>-->
      <!--      </a-dropdown>-->
      <!--    </div>-->
      <s-table
        ref="table"
        size="default"
        rowKey="key"
        :columns="columns"
        :data="loadData"
        showPagination="auto">
        <span slot="state" slot-scope="text">
          <a-tag :color="text | selectColorFilter">{{ text | selectTextFilter }}</a-tag>
        </span>
        <span slot="projectType" slot-scope="text">
          <a-tag>{{ text | selectType }}</a-tag>
        </span>
        <span slot="action" slot-scope="text, record">
          <template>
            <a :disabled="record.state !== 1" v-if="record.voted === 1" @click="handleEdit(record,true)">已投票</a>
            <a v-else-if="record.voted === 0" :disabled="record.state !== 1" @click="handleEdit(record)">开始投票</a>
            <a v-else :disabled="record.state !== 1">投票</a>
            <!--          <remove-point ref="removePoint" :pointIds="String(record.pointId)" @ok="handleOk"/>-->
          </template>
        </span>
      </s-table>
    </div>
    <candidate ref="candidate" @backProject="receive" @ok="handleOk" v-else></candidate>
    <!--    <add-point ref="addPoint" :courses="courses" :points="points" @ok="handleOk" />-->
    <!--    <edit-point ref="editPoint" :courses="courses" @ok="handleOk"/>-->
  </a-card>
</template>

<script>
  import moment from 'moment'
  import { STable } from '@/components'
  import { listUserProject } from '@/api/vote/project'
  import Candidate from '@/views/list/Candidate'
  import { queryVoted } from '@/api/vote/vote'
  // import { queryPoint, listPoint } from '@/api/basic/class'
  // import { listCourse } from '@/api/basic/course'
  // import AddPoint from './modules/class/AddClass'
  // import RemovePoint from './modules/class/RemoveClass'
  // import EditPoint from './modules/class/EditPoint'
  // 用于处理过滤器动态获取数据
  let that

  export default {
    name: 'PointList',
    components: {
      STable,
      Candidate
    },
    data () {
      return {
        // 高级搜索 展开/关闭
        advanced: false,
        pd: false,
        // 查询参数
        queryParam: {},
        vote: [],
        states: ['未开始', '投票中', '已结束'],
        // 表头
        columns: [
          {
            title: '项目名称',
            dataIndex: 'projectName',
            align: 'center'
          },
          {
            title: '项目发起人',
            dataIndex: 'sponsor',
            align: 'center',
            sorter: true
          },
          {
            title: '投票类型',
            dataIndex: 'projectType',
            align: 'center',
            scopedSlots: { customRender: 'projectType' },
            sorter: true
          },
          {
            title: '限投数',
            dataIndex: 'maxVote',
            align: 'center',
            sorter: true
          },
          {
            title: '项目状态',
            dataIndex: 'state',
            align: 'center',
            scopedSlots: { customRender: 'state' },
            sorter: true
          },
          {
            title: '评审日期',
            dataIndex: 'date',
            align: 'center',
            customRender: (text) => moment(text).format('YYYY-MM-DD'),
            sorter: true
          },
          {
            title: '操作',
            dataIndex: 'action',
            width: '150px',
            align: 'center',
            scopedSlots: { customRender: 'action' }
          }
        ],
        // 加载数据方法 必须为 Promise 对象
        loadData: parameter => {
          // 统一处理查询参数，便于后端表格DTO用固定参数接收
          const queryJson = { 'queryParam': JSON.stringify(this.queryParam) }
          return listUserProject(Object.assign(parameter, queryJson))
            .then(res => {
              return res.result
            })
        },
        selectedRowKeys: [],
        selectedRows: [],

        // custom table alert & rowSelection
        // options: {
        //   alert: { show: true, clear: () => { this.selectedRowKeys = [] } },
        //   rowSelection: {
        //     selectedRowKeys: this.selectedRowKeys,
        //     onChange: this.onSelectChange
        //   }
        // },
        optionAlertShow: false
      }
    },
    filters: {
      selectTextFilter (val) {
        let name = ''
        if (val === 0) {
          name = '未开始'
        } else if (val === 1) {
          name = '投票中'
        } else {
          name = '已结束'
        }
        return name
      },
      selectType(val) {
        let name = ''
        if (val === 0) {
          name = '选择评价型'
        } else if (val === 1) {
          name = '同意反对型'
        }
        return name
      },
      selectColorFilter (val) {
        let name = ''
        if (val === 0) {
          name = 'blue'
        } else if (val === 1) {
          name = 'green'
        } else {
          name = 'red'
        }
        return name
      }
    },
    beforeCreate () {
      that = this
    },
    created () {
      // this.tableOption()
      this.queryVoted()
      // listCourse()
      //   .then(res => {
      //     if (res.message !== 'error') {
      //       this.courses = res.result
      //     } else {
      //       this.$message.error('操作失败！')
      //     }
      //   })
      // listPoint()
      //   .then(res => {
      //     if (res.message !== 'error') {
      //       this.points = res.result
      //     } else {
      //       this.$message.error('操作失败！')
      //     }
      //   })
    },
    methods: {
      // tableOption () {
      //   if (!this.optionAlertShow) {
      //     this.options = {
      //       alert: { show: true, clear: () => { this.selectedRowKeys = [] } },
      //       rowSelection: {
      //         selectedRowKeys: this.selectedRowKeys,
      //         onChange: this.onSelectChange
      //       }
      //     }
      //     this.optionAlertShow = true
      //   } else {
      //     this.options = {
      //       alert: false,
      //       rowSelection: null
      //     }
      //     this.optionAlertShow = false
      //   }
      // },
      queryVoted () {
        const queryJson = {
          'pageNo': 1,
          'pageSize': 10,
          'queryParam': JSON.stringify(that.queryParam) }
        queryVoted(queryJson)
          .then(res => {
            if (res.message !== 'error') {
              that.vote = res.result.data
            } else {
              that.$message.error('操作失败！')
            }
          })
      },
      // handleEdit (record) {
      //   this.$refs.editPoint.edit(record)
      // },

      handleOk () {
        this.$refs.table.clearSelected()
        this.$refs.table.refresh(false)
      },
      handleEdit(record, voted) {
        this.pd = true
        this.$nextTick(() => {
          console.log(this.$refs.candidate)
          this.$refs.candidate.edit(record, voted)
        })
      },
      // onSelectChange (selectedRowKeys, selectedRows) {
      //   this.selectedRowKeys = selectedRowKeys
      //   this.selectedRows = selectedRows
      // },
      toggleAdvanced () {
        this.advanced = !this.advanced
      },
      receive () {
        this.pd = false
      }
    }
  }
</script>
